<script lang="ts" setup>
import { computed } from "vue";
import IconSvg from "@/components/IconSvg/index.vue";

const modules = import.meta.glob("@/assets/iconsvg/*.svg", { eager: true, import: "default" });

const list = Object.entries(modules).map((item: any) => {
	const name = item[0].replace("/src/assets/iconsvg/", "").replace(".svg", "");
	return name;
});
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	icon: {
		type: String,
	},
});

const emit = defineEmits<{
	(e: "update:modelValue", value: boolean): void;
	(e: "select", value: string): void;
}>();
const visible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", !!val);
	},
});
const onCancel = () => {
	emit("update:modelValue", false);
};
const item = ref("");
item.value = props.icon || "";
const onItem = computed(() => {
	return item.value || props.icon;
});
const onClick = (name: string) => {
	item.value = name;
};
const onConfirmm = () => {
	emit("select", item.value);
	emit("update:modelValue", false);
};
</script>
<template>
	<el-dialog v-model="visible" title="选择图标" width="70%" :before-close="onCancel">
		<div v-for="(name, index) in list" :index="index" :key="name" style="display: inline-block">
			<div :class="{ 'v-icon': true, 'v-icon-select': onItem === name }" @click="onClick(name)">
				<IconSvg :name="name" class="icon" :iconStyle="{ 'font-size': '26px' }" />
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">取消</el-button>
				<el-button type="primary" @click="onConfirmm"> 确认 </el-button>
			</span>
		</template></el-dialog
	>
</template>

<style lang="scss" scoped>
.v-icon {
	padding: 10px;
	margin: 0 5px 5px;
	text-align: center;
	cursor: pointer;
	border-radius: 4px;
}
.v-icon-select {
	color: #ffffff;
	background: #409eff;
}
</style>
